<template>
  <div class="pt-[20px]">
    <CustomTitle title="设备列表">
      <!-- <span class="text-[#53DCFF] cursor-pointer" @click="addDevices">+ 添加设备</span> -->
    </CustomTitle>
    <div class="w-[100%] mt-[10px]">
      <!-- <CustomTitle title="表金属杂质检测数据" /> -->
      <a-table
        @change="handleTableChange"
        row-key="name"
        :scroll="{ y: 320, x: '100%' }"
        ref="tableRef"
        :loading="loading"
        :pagination="false"
        :columns="columns"
        :data-source="tableData"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'remote_control' && text">
            <a :href="text" target="_blank">
              <img src="@/assets/images/remote.png" class="w-[24px] object-cover cursor-pointer" />
            </a>
          </template>
          <template v-if="column.key === 'detail'">
            <img src="@/assets/images/detail.png" @click="openDetail(record)" class="w-[22px] object-cover cursor-pointer" />
          </template>
          <template v-if="column.key === 'status'">
            <div v-if="record.status === '故障'" class="flex items-center">
              <span class="text-[#F83253] w-[8px] h-[8px] bg-[#F83253] rounded-[5px] inline-block mr-[5px]"></span>
              <span
                :class="{
                  'text-[#53DCFF]': record.status === '运行中',
                  'text-[#E6E6E6]': record.status === '离线',
                  'text-[#F83253]': record.status === '故障',
                }"
                >{{ record.status }}</span
              >
            </div>
            <div v-else-if="record.status === '运行中'" class="flex items-center">
              <span class="text-[#53DCFF] w-[8px] h-[8px] bg-[#53DCFF] rounded-[5px] inline-block mr-[5px]"></span>
              <span
                :class="{
                  'text-[#53DCFF]': record.status === '运行中',
                }"
                >{{ record.status }}</span
              >
            </div>
            <div v-else-if="record.status === '离线'" class="flex items-center">
              <span class="text-[#E6E6E6] w-[8px] h-[8px] bg-[#E6E6E6] rounded-[5px] inline-block mr-[5px]"></span>
              <span
                :class="{
                  'text-[#E6E6E6]': record.status === '离线',
                }"
                >{{ record.status }}</span
              >
            </div>
          </template>
        </template>
      </a-table>
      <!-- <a-table ref="tableRef" :scroll="{ y: 200, x: '100%' }" :loading="loading" class :pagination="false" :columns="columns" :data-source="data"> </a-table> -->
    </div>
  </div>
  <a-drawer title="添加设备" placement="right" :closable="false" :open="open" :get-container="false" :style="{ position: 'absolute' }" @close="onClose">
    <AddDevice @refresh="getData" />
  </a-drawer>
</template>
<script setup lang="ts">
import { onBeforeMount, onUnmounted, ref } from 'vue';
import { default_columns } from './columns';
import AddDevice from './AddDevice.vue';
import { apiGetDevices } from '@/http/api';
// import { message } from 'ant-design-vue';

let timer: any = null;
// const columns: any = default_columns;
const columns: any = ref(default_columns);
const route = useRoute();
const open = ref(false);
const tableData = ref<iDevice[]>([]);
const loading = ref(false);
const router = useRouter();
const tableRef = ref('');
const getData = async () => {
  try {
    loading.value = true;
    const res = await apiGetDevices();
    tableData.value = res.data;
    handleData(res.data);
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

const handleData = (data: any) => {
  const set = new Set();
  data.forEach((item: any) => {
    set.add(item.type);
  });
  const project = columns.value.filter((item: any) => item.title === '类型');
  if (project && project.length > 0) {
    const arr: any = [];

    Array.from(set).forEach(item => {
      arr.push({
        text: item,
        value: item,
      });
    });
    project[0].filters = arr;
  }

  const set1 = new Set();
  data.forEach((item: any) => {
    set1.add(item.analysis_project);
  });
  const project1 = columns.value.filter((item: any) => item.title === '分析项目');
  const arr1: any = [];
  Array.from(set1).forEach(item => {
    arr1.push({
      text: item,
      value: item,
    });
  });
  project1[0].filters = arr1;

  const query = route.query;
  if (query.name) {
    router.replace({ name: 'zfn_devices' });
    filterProject(query.name as string);
  }
};

const onClose = () => {
  open.value = false;
};
const handleTableChange = (_: any, filters: any, __: any) => {
  if (filters) {
    if (filters.type) {
      const project = columns.value.filter((item: any) => item.title === '类型');
      project[0].filteredValue = filters.type;
    } else {
      const project = columns.value.filter((item: any) => item.title === '类型');
      project[0].filteredValue = [];
    }
    if (filters.analysis_project) {
      const project = columns.value.filter((item: any) => item.title === '分析项目');
      project[0].filteredValue = filters.analysis_project;
    } else {
      const project = columns.value.filter((item: any) => item.title === '分析项目');
      project[0].filteredValue = [];
    }
  } else {
    const project = columns.value.filter((item: any) => item.title === '类型');
    project[0].filteredValue = [];
    const project1 = columns.value.filter((item: any) => item.title === '分析项目');
    project1[0].filteredValue = [];
  }
};
const openDetail = (record: any) => {
  // message.warning('暂未开放');

  router.push({
    name: 'devices_info',
    query: {
      name: record.name,
      parent_name: record.group_parent_name,
      group_second_name: record.group_second_name,
      // group_second_name: record.type,
    },
  });
};

// const addDevices = () => {
//   open.value = true;
// };

defineExpose({
  refresh: getData,
});
const queryData = async () => {
  // if (timer) {
  //   getData();
  //   return;
  // }
  // timer = setInterval(() => {
  //   getData();
  // }, 60 * 1000);
  getData();
};
onBeforeMount(() => {
  queryData();
});
const filterProject = (name: string) => {
  // columns.value = default_columns.filter((item: any) => item.dataIndex !== name);
  const project = columns.value.filter((item: any) => item.title === '类型');
  if (project && project.length > 0) {
    if ('PRETREATMENT' === name) {
      project[0].filteredValue = ['预处理'];
    } else if ('WATERDETERMINATION' === name) {
      project[0].filteredValue = ['露点仪'];
    } else {
      project[0].filteredValue = [name];
    }
  }
};
onMounted(() => {});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>
<!-- :deep(.ant-table-thead > tr:nth-child(1) > th) {
  &:nth-child(6),
  &:nth-child(7),
  &:nth-child(8),
  &:nth-child(9),
  &:nth-child(10) {
    color: #53dcff !important;
  }
  &:nth-child(11) {
    color: #ff9f00 !important;
  }
}
:deep(.ant-table-thead > tr:nth-child(1) > th) {
  &:nth-child(1),
  &:nth-child(2),
  &:nth-child(3),
  &:nth-child(4),
  &:nth-child(5) {
    background-color: #1b1b1b !important;
    color: white !important;
  }
}
:deep(.ant-table-thead > tr:nth-child(2) > th) {
  color: #ff9f00 !important;
} -->
<style lang="less" scoped>
// :deep(.ant-table-tbody > tr > td) {
//   // &:nth-child(4),
//   // &:nth-child(5),
//   &:nth-child(6) {
//     color: #53dcff !important;
//   }
//   &:nth-child(1) {
//     color: #ff9f00 !important;
//   }
// }
:deep(.ant-table-tbody > tr > td) {
  &:nth-child(11),
  &:nth-child(12),
  &:nth-child(13),
  &:nth-child(14),
  &:nth-child(15),
  &:nth-child(16),
  &:nth-child(17),
  &:nth-child(18),
  &:nth-child(18),
  &:nth-child(19),
  &:nth-child(20),
  &:nth-child(21),
  &:nth-child(22),
  &:nth-child(23),
  &:nth-child(24),
  &:nth-child(25) {
    color: #ff9f00 !important;
  }
}
</style>
